﻿<%@ Page Title="" Language="C#" MasterPageFile="~/GISLayout.Master" AutoEventWireup="true" CodeBehind="wfVisitMapTracking.aspx.cs" Inherits="Dragon.wfVisitMapTracking" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">    
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAvb9RBGC3Arn119X7wZIiZrt3yX0DVOOI&libraries=geometry"></script>    
    <script type="text/javascript">
        var markers = [
            <asp:Repeater ID="rptMarkers" runat="server">
                <ItemTemplate>
                    {
                    "ID": '<%# Eval("ID") %>',
                    "title": '<%# Eval("Title") %>',
                    "lat": '<%# Eval("Latitude") %>',
                    "lng": '<%# Eval("Longitude") %>',
                    "description": '<%# Eval("Description") %>',
                    "moved": '<%# Eval("Moved") %>'
                }
            </ItemTemplate>
            <SeparatorTemplate>,</SeparatorTemplate>
        </asp:Repeater>
        ];
        
        var mapOptions, infoWindow, map, step, myTrip;
        var icons = new Array("/Picture/hh01.png", "/Picture/hh02.png", "/Picture/hh03.png", "/Picture/hh04.png", "/Picture/hh05.png", "/Picture/hh06.png", "/Picture/hh07.png",
           "/Picture/hh08.png", "/Picture/hh09.png", "/Picture/hh10.png", "/Picture/hh11.png", "/Picture/hh12.png", "/Picture/hh13.png", "/Picture/hh14.png", "/Picture/hh15.png", 
           "/Picture/hh16.png", "/Picture/hh17.png", "/Picture/hh18.png", "/Picture/hh19.png", "/Picture/hh20.png", "/Picture/hh21.png", "/Picture/hh22.png", "/Picture/hh23.png", 
           "/Picture/hh24.png", "/Picture/hh25.png", "/Picture/hh26.png", "/Picture/hh27.png", "/Picture/hh28.png", "/Picture/hh29.png", "/Picture/hh30.png", "/Picture/hh31.png");

        function ViewFullStep()
        {
            InitMap();
            do {
                ViewStep();
            }
            while (step < markers.length);
        }

        function InitMap()
        {            
            //Khoi tao ban do
            mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

            //Khoi tao diem bat dau
            step = 0;
            var data = markers[step]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,
                icon:icons[0]
            });

            infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(data.description);
            infoWindow.open(map, marker);
            (function (marker, data) {                
                google.maps.event.addListener(marker, "click", function (e) {                    
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
                        
            //Enable nut xem tuyen duong
            document.getElementById("btnViewStep").disabled = false;            
        }

        function ViewStep()
        {            
            //Xac dinh thu tu diem tham vieng
            step++;
            if (step == markers.length) 
                DisableViewStep();

            //Khoi tao cac gia tri
            var data = markers[step];
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);            
            var stuDistance = data.moved;

            //Canh chinh lai trung tam ban do
            map.setOptions({center: new google.maps.LatLng(markers[step].lat, markers[step].lng)});
                   
            //Them pin cho diem ban
            var iconNumber;
            if (step < 30)
                iconNumber = step;
            else
                iconNumber = 30;
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,
                icon:icons[iconNumber]
            });          
            
            //Hien thi thong tin diem ban
            infoWindow.setContent(data.description);
            infoWindow.open(map, marker);

            (function (marker, data) {                
                google.maps.event.addListener(marker, "click", function (e) {                    
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });
            })(marker, data);

            //Ve duong noi giua 2 diem ban
            var lastLatlng = new google.maps.LatLng(markers[step-1].lat, markers[step-1].lng);
            polyline = new google.maps.Polyline({
                path: [lastLatlng, myLatlng],
                strokeColor: "#4F62D8",
                strokeOpacity: 0.5,
                strokeWeight: 4,
                geodesic: true,
                map: map
            });            
            
            //Tinh va hien thi khoang cach di chuyen            
            var inBetween = google.maps.geometry.spherical.interpolate(lastLatlng, myLatlng, 0.5);  
            var midPointMarker = new google.maps.Marker({  
                position: inBetween,  
                map: map,
                visible: false
            });

            var stuLabel = new Label();
            stuLabel.bindTo('position', midPointMarker, 'position');
            stuLabel.set('text', stuDistance + ' m');
            
            google.maps.event.addListener(polyline, 'mouseover', function() {
                stuLabel.setMap(map);
            });

            google.maps.event.addListener(polyline, 'mouseout', function() {
                stuLabel.setMap(null);
            });
        }
        
        function DisableViewStep()
        {
            document.getElementById("btnViewStep").disabled = true;
            infoWindow.close();
        }       

        // Define the overlay, derived from google.maps.OverlayView
        function Label(opt_options) {
            // Initialization
            this.setValues(opt_options);

            // Label specific
            var span = this.span_ = document.createElement('span');
            span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
                                 'white-space: nowrap; border: 1px solid blue; ' +
                                 'padding: 2px; background-color: white';

            var div = this.div_ = document.createElement('div');
            div.appendChild(span);
            div.style.cssText = 'position: absolute; display: none';
        }
        Label.prototype = new google.maps.OverlayView;

        // Implement onAdd
        Label.prototype.onAdd = function() {
            var pane = this.getPanes().overlayLayer;
            pane.appendChild(this.div_);

            // Ensures the label is redrawn if the text or position is changed.
            var me = this;
            this.listeners_ = [
                google.maps.event.addListener(this, 'position_changed',
                    function() { me.draw(); }),
                google.maps.event.addListener(this, 'text_changed',
                    function() { me.draw(); })
            ];
        };

        // Implement onRemove
        Label.prototype.onRemove = function() {
            this.div_.parentNode.removeChild(this.div_);

            // Label is removed from the map, stop updating its position/text.
            for (var i = 0, I = this.listeners_.length; i < I; ++i) {
                google.maps.event.removeListener(this.listeners_[i]);
            }
        };

        // Implement draw
        Label.prototype.draw = function() {
            var projection = this.getProjection();
            var position = projection.fromLatLngToDivPixel(this.get('position'));

            var div = this.div_;
            div.style.left = position.x + 'px';
            div.style.top = position.y + 'px';
            div.style.display = 'block';

            this.span_.innerHTML = this.get('text').toString();
        };
    </script>

    <table style="width:1150px">  
        <tr>
            <td style="width:7%; text-align: right; font-size: small; vertical-align:bottom;">Region</td>
            <td style="width: 18%">
                <cc1:ComboBox ID="ddlArea" runat="server" DataSourceID="sdsArea"
                    DataTextField="Name" DataValueField="Code" DropDownStyle="DropDownList"
                    MaxLength="0" Style="display: inline; text-align: left;" Width="100%"
                    AutoPostBack="True" ForeColor="Navy">
                </cc1:ComboBox>
            </td>
            <td style="width:7%; text-align: right;font-size: small; vertical-align:bottom;">Area</td>
            <td style="width:18%">
                <cc1:ComboBox ID="ddlProvince" runat="server" DataSourceID="sdsProvince" 
                    DataTextField="Name" DataValueField="Code" DropDownStyle="DropDownList" 
                    MaxLength="0" style="display: inline; text-align: left;" Width="100%" 
                    AutoPostBack="True" ForeColor="Navy">
                </cc1:ComboBox>
            </td>
            <td style="width: 7%; text-align: right;font-size: small; vertical-align:bottom;">Territory</td>
            <td style="width: 18%;">
                <cc1:ComboBox ID="ddlTerritory" runat="server" DataSourceID="sdsTerritory" 
                    DataTextField="Name" DataValueField="Code" DropDownStyle="DropDownList" 
                    MaxLength="0" style="display: inline; text-align: left;" Width="100%"
                    AutoPostBack="True"  ForeColor="Navy">
                </cc1:ComboBox>
            </td> 
            <td style="width:7%; text-align: right; font-size: small; vertical-align:bottom;">SR</td>
            <td style="width: 18%">
                <cc1:ComboBox ID="ddlUser" runat="server" DataSourceID="sdsSR"
                    DataTextField="Fullname" DataValueField="Username" DropDownStyle="DropDownList"
                    MaxLength="0" Style="display: inline; text-align: left;" Width="100%"
                    AutoPostBack="True" ForeColor="Navy">
                </cc1:ComboBox>
            </td>        
        </tr> 
        <tr>     
            <td style="width: 7%; text-align: right;">Date</td>
            <td style="width: 18%;">
                <asp:TextBox ID="txtReportDate" runat="server" Width="98%" ForeColor="Navy"></asp:TextBox>
                <cc1:CalendarExtender ID="txtReportDate_CalendarExtender" runat="server" BehaviorID="txtFromDate_CalendarExtender" 
                    TargetControlID="txtReportDate" Format="dd/MM/yyyy"/>
            </td>           
            <td colspan="6" style="text-align:center">
                <asp:Label ID="lblInfo" runat="server" Font-Size="Medium"></asp:Label>
            </td>          
        </tr>         
        <tr>
            <td colspan="8" style="text-align:center">          
                 <asp:Button ID="btnFullStep" runat="server" Text="View All" OnClick="btnFullStep_Click" ForeColor="Navy"/>
                <asp:Button ID="btnTracking" runat="server" Text="View By Step" OnClick="btnTracking_Click" ForeColor="Navy"/>
                <input type="button" id="btnViewStep" value="Next Step" style="height:20px;width:90px;color: #000080;" onclick="ViewStep();" disabled="disabled"/>
            </td>           
        </tr>
        <tr>
           <td colspan="2"  style="border: 1px solid #003300;vertical-align:top;overflow:auto">                
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="sdsRoutingDetail"
                    style="font-size: small" Width="100%" OnRowDataBound="GridView1_RowDataBound">
                    <Columns>
                        <asp:BoundField DataField="Title" HeaderText="Outlet" SortExpression="Title" />
                        <asp:BoundField DataField="Moved" HeaderText="Moved<br/>(m)" HtmlEncode="false" SortExpression="Moved" DataFormatString=" {0:#,###}">
                        <ItemStyle HorizontalAlign="Right" />
                        </asp:BoundField>
                    </Columns>
                </asp:GridView>
            </td>            
            <td colspan="6" style="border: 1px solid #003300; vertical-align:top;">                
                <div id="dvMap" style="width: 100%; height: 530px; "></div>
            </td>
        </tr>
    </table>  

    <asp:SqlDataSource ID="sdsArea" runat="server" 
        ConnectionString="<%$ ConnectionStrings:CarlsbergConnectionString %>" 
        SelectCommand="SELECT * FROM [Area]">
    </asp:SqlDataSource>

    <asp:SqlDataSource ID="sdsProvince" runat="server" 
        ConnectionString="<%$ ConnectionStrings:CarlsbergConnectionString %>" 
        SelectCommand="SELECT * FROM [Province] WHERE ([Status] = 1) and (Location = @Area) order by Name">
        <SelectParameters>
            <asp:ControlParameter ControlID="ddlArea" DefaultValue="" Name="Area" PropertyName="SelectedValue" />
        </SelectParameters>
    </asp:SqlDataSource>

    <asp:SqlDataSource ID="sdsTerritory" runat="server" 
        ConnectionString="<%$ ConnectionStrings:CarlsbergConnectionString %>" 
        SelectCommand="SELECT Code, Replace(Name, ' Sales Area','') Name 
        FROM [Region] 
        WHERE ([Province] = @Province and Territory = '1' and [Status] = 1) 
        ORDER BY Name">
        <SelectParameters>
            <asp:ControlParameter ControlID="ddlProvince" Name="Province" PropertyName="SelectedValue" />
        </SelectParameters>
    </asp:SqlDataSource>

    <asp:SqlDataSource ID="sdsSR" runat="server" 
        ConnectionString="<%$ ConnectionStrings:CarlsbergConnectionString %>" SelectCommand="SELECT [User].Username, [User].Fullname
        FROM [User] INNER JOIN Region ON [User].Region = Region.Code
        WHERE ([User].UserType = 'SR') and ([User].Fullname not like '%Dummy%') and (Region.Territory  = @Territory )
        ORDER BY [User] .Fullname">
        <SelectParameters>
            <asp:ControlParameter ControlID="ddlTerritory" Name="Territory" PropertyName="SelectedValue" />
        </SelectParameters>
    </asp:SqlDataSource>
    
    <asp:SqlDataSource ID="sdsRoutingDetail" runat="server" 
            ConnectionString="<%$ ConnectionStrings:CarlsbergConnectionString %>" SelectCommand="SELECT [Title], [Moved] FROM [MapTracking]">
    </asp:SqlDataSource>
    </asp:Content>
